<script setup>
import { onMounted, ref } from 'vue'
import { personalStat, nodeList } from '@/api/teacher'
import { useRoute } from 'vue-router'
import router from '@/router'
import dayjs from 'dayjs'

const route = useRoute()
const queryParam = ref({
	courseId: '',
	classNo: '',
	status: '',
})
// const selectedTitle = ref('')
const listShow = ref(false)
const courseList = ref([])
const classList = ref([])
const xData = ref(['正常', '迟到', '早退', '旷课', '缺卡', '请假', '补卡'])
const yData = ref([])
// const myChartStyle = ref({
// 	width: '100%',
// 	height: '400px',
// })
const kaoqin = ref([])
// const dataIndex = ref(0)
const infoData = () => {
	classList.value = []
	let param = JSON.parse(route.query.param + '')
	param.courseList.forEach((el) => {
		courseList.value.push({
			text: el.courseName,
			value: el.courseId,
		})
	})
	param.classList.forEach((el) => {
		classList.value.push({
			text: el.className,
			value: el.classNo,
		})
	})
	queryParam.value.courseId = param.currentCourse
	queryParam.value.classNo = param.currentClass
	getEchartsData()
}

const changeCourse = () => {
	listShow.value = false
	getEchartsData()
}
const getEchartsData = async () => {
	const res = await personalStat(queryParam.value)
	yData.value = res.data
}

const goBack = () => {
	router.replace({
		path: '/home',
	})
}

const getAttendsList = (value) => {
	queryParam.value.status = value
	kaoqinList()
}
const kaoqinList = async () => {
	const res = await nodeList(queryParam.value)
	res.data.forEach((e) => {
		e.attendsTime = dayjs(e.attendsTime).format('YYYY-MM-DD HH:mm:ss')
	})
	kaoqin.value = res.data
	listShow.value = true
}

onMounted(() => {
	infoData()
})
</script>

<template>
	<div class="pages">
		<van-nav-bar class="title" title="考勤统计" left-text="返回" left-arrow @click-left="goBack" />
		<div class="content">
			<van-dropdown-menu>
				<van-dropdown-item
					v-model="queryParam.courseId"
					@change="changeCourse"
					:options="courseList"
				></van-dropdown-item>
				<van-dropdown-item
					v-model="queryParam.classNo"
					@change="changeCourse"
					:options="classList"
				></van-dropdown-item>
			</van-dropdown-menu>
			<van-grid style="margin-top: 40px" :gutter="20" :column-num="2" :clickable="true">
				<van-grid-item @click="getAttendsList(0)" class="card zcdk">
					<slot name="default">
						<div>{{ yData[0] }}</div>
						正常打卡人数
					</slot>
				</van-grid-item>
				<van-grid-item @click="getAttendsList(1)" class="card cd">
					<slot name="default">
						<div>{{ yData[1] }}</div>
						迟到人数
					</slot>
				</van-grid-item>
				<van-grid-item @click="getAttendsList(0)" class="card zt">
					<slot name="default">
						<div>{{ yData[2] }}</div>
						早退人数
					</slot>
				</van-grid-item>
				<van-grid-item @click="getAttendsList(0)" class="card kk">
					<slot name="default">
						<div>{{ yData[3] }}</div>
						旷课人数
					</slot>
				</van-grid-item>
				<van-grid-item @click="getAttendsList(4)" class="card qk">
					<slot name="default">
						<div>{{ yData[4] }}</div>
						缺卡人数
					</slot>
				</van-grid-item>
				<van-grid-item @click="getAttendsList(5)" class="card qj">
					<slot name="default">
						<div>{{ yData[5] }}</div>
						请假人数
					</slot>
				</van-grid-item>
			</van-grid>
			<div class="kaoqin" v-if="listShow">
				<div class="kaoqin-item" v-for="(item, index) in kaoqin" :key="index">
					<div>{{ item.studentName }} ({{ item.studentNo }}) {{}}</div>
					<div>{{ item.attendsDate }} ({{ item.weekOfDay }}) {{}}</div>
					<div>打卡类型：{{ +item.typeId === 8 ? '上课打卡' : '下课打卡' }}</div>
					<div>打卡时间：{{ item.attendsTime }}</div>
					<div>打卡方式：{{ +item.clockType === 0 ? 'PC端打卡' : '移动端打卡' }}</div>
					<div>考勤状态：{{ xData[queryParam.status] }}</div>
					<hr style="color: #979797" />
				</div>
			</div>
		</div>
	</div>
</template>

<style scoped lang="scss">
.pages::v-deep {
	padding-bottom: 34px;
	box-sizing: border-box;
	background: #fff;
	height: 100%;

	.card {
		& > div {
			border-radius: 10px;
			font-size: 30px;
		}

		color: #fff;
	}

	.zcdk .van-grid-item__content {
		background: #64d863;
	}

	.cd .van-grid-item__content {
		background: #ff7878;
	}

	.zt .van-grid-item__content {
		background: #f3ad5d;
	}

	.kk .van-grid-item__content {
		background: #eb73df;
	}

	.qk .van-grid-item__content {
		background: #f96b6b;
	}

	.qj .van-grid-item__content {
		background: #66d1ff;
	}

	&.title {
		font-size: 44px;
		font-family: 'Microsoft YaHei UI', serif;
		font-weight: 400;
		color: #000;
		letter-spacing: 1px;
		padding: 94px 0 58px;
		text-align: center;
	}

	.content {
		padding: 0 30px;
		box-sizing: border-box;
		height: 100%;
	}

	.kaoqin {
		width: 100%;
		background: #000;
		color: #fff;
		font-size: 35px;
		margin-top: 30px;

		.kaoqin-item {
			padding-top: 20px;
			padding-left: 20px;
			line-height: 40px;
			height: 280px;
		}
	}
}
</style>
